<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>可以输入也可以下拉选择的select</title>
	<meta name="keywords" content="" />  
	<meta name="description" content="" />  
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
	<meta name="format-detection" content="telephone=no" />  
	<meta name="apple-mobile-web-app-capable" content="yes" />  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
	<meta name="author" content="duanliang, duanliang920.com" /> 
	<link rel="stylesheet" type="text/css" href="css/jquery-editable-select.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<style>
		@media screen and (max-width: 700px){
			.main{width: 360px;}
			.demo{width:360px;margin:50px auto 10px auto;padding:10px;}
		}
	</style>
</head>

<body>
	<!-- header -->
	<header id="header" class="header">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
					<!-- <span class="sr-only">Toggle navigation</span> -->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="https://runcoderhang.github.io/" title="" class="navbar-brand"><b>Hang</b></a>
			</div>
			<nav id="bs-navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;">
				<ul class="nav navbar-nav">
					<li><a href="https://runcoderhang.github.io/">博客</a></li>
					<li><a href="https://runcoderhang.github.io/2018/05/06/editable-select.html">文章</a></li>
					<li><a href="https://github.com/RunCoderHang/some-cases/tree/master/demo-2">Github</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<!-- 主要内容 main -->
	<div class="main">
		<a href="https://runcoderhang.github.io/2018/05/06/editable-select.html">可以输入也可以下拉选择的select</a>
		<hr>
		<div class="demo">
			<div class="form-group">
				<label>程序语言</label>
				<select class="form-control" id="editable-select">
					<option>JAVA</option>
					<option>C</option>
					<option>C++</option>
					<option>C#</option>
					<option>PYTHON</option>
					<option>HTML&CSS</option>
					<option>PHP</option>
				</select>
			</div>
			<div class="form-group">
				<label>课堂学习(支持html)</label>
				<select class="form-control" id="html">
					<option>腾讯课堂 - &lt;small&gt;&lt;a href="https://ke.qq.com/" target="_blank" rel="nofollow"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>网易云课堂 - &lt;small&gt;&lt;a href="http://study.163.com/" target="_blank" rel="nofollow"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>中国大学MOOC -  &lt;small&gt;&lt;a href="https://www.icourse163.org/" target="_blank" rel="nofollow"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>我要自学网 -  &lt;small&gt;&lt;a href="http://www.51zxw.net/" target="_blank" rel="nofollow"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>百度传课 -  &lt;small&gt;&lt;a href="https://chuanke.baidu.com/" target="_blank" rel="nofollow"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
				</select>
			</div>
		</div>
	</div>
	<!-- footer -->
	<div class="footer" style="text-align: center;">
		<p>参考链接：<a href="https://www.helloweba.net/demo/2016/editable-select/" target="_blank">可输入也可以下拉选择的select</a></p>
		<p>详细解释：<a href="https://www.helloweba.net/javascript/348.html" target="_blank">https://www.helloweba.net/javascript/348.html</a></p>
		<p>jQuery Editable Select项目官网地址：<a href="https://github.com/indrimuska/jquery-editable-select" target="_blank">https://github.com/indrimuska/jquery-editable-select</a></p>
	</div>


	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/jquery-editable-select.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$('#editable-select').editableSelect({
			effects: 'slide'
		});
		$('#html').editableSelect();
	</script>
</body>
</html>